
<script lang="ts" setup>
import headerUtil from "./base/common/headerUtil.vue";
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const currentData = ref<any>({
  type: router.currentRoute.value.query.type,
  headerObj:{
    showType: 2,
    closeBtn: false
  },
  local: [
    {name:"超境品牌车衣质保卡", url: new URL("../assets/images/pdf-0.jpg", import.meta.url)},
    {name:"7C品牌改色膜质保卡", url: new URL("../assets/images/pdf-1.jpg", import.meta.url)},
    {name:"CYS品牌改色膜质保卡", url: new URL("../assets/images/pdf-2.jpg", import.meta.url)},
  ],

});

const toSaveInfo = () => {
  router.push({path: "/saveInfo", query: {type:currentData.value.type}})
}


</script>
<template>
  <div class="demo">
    <div class="header">
      <headerUtil :obj="currentData.headerObj">{{currentData.local[currentData.type].name}}</headerUtil>
    </div>
    <div class="content">
      <img  class="img" :src="currentData.local[currentData.type].url">
      <div class="btnWrap">
        <van-button type="primary" @click="toSaveInfo()">填写质保涵选项</van-button>
      </div>
    </div>
    
  </div>
</template>

<style lang="less" scoped>
.demo {
  position: relative;
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 3.75rem;
    height: .44rem;
    // position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .content {
    padding: .1rem;
    width: 3.75rem;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    overflow-x: hidden;
    img {
      width: 100%;
    }
  }
  .btnWrap {
    padding-top: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}
</style>
 